<template>
  <!--  应用主体  -->
  <v-app light v-resize="checkIsMobile">

    <!-- 顶部导航栏，显示一些基础信息 -->
    <v-app-bar app  color="grey lighten-4" elevate-on-scroll  fixed :clipped-left="!flag.isMobile">

      <!-- 用于显示菜单栏 -->
      <v-app-bar-nav-icon class="hidden-sm-and-up" @click="flag.drawerShow = !flag.drawerShow"></v-app-bar-nav-icon>

      <!-- 标题 -->
      <v-toolbar-title @click="$router.push('/home')" class="font-weight-bold text-center text-md-h4" style="cursor: pointer">Vignetting</v-toolbar-title>

      <v-spacer></v-spacer>

      <!-- 搜索框 -->
      <v-text-field style="max-width: calc(20% + 100px); margin: auto 10px" v-model="information.searchContent" append-icon="mdi-magnify" @click:append="searchPre" @keyup.enter="searchPre"  placeholder="请输入文章关键词"></v-text-field>

      <!-- 菜单内容 -->
      <div class="hidden-xs-only" style="margin-left: calc(5px + 2%)">
        <v-btn-toggle v-model="information.activeMenu" borderless>
          <v-btn value="home" @click="routerTo('home')" class="grey lighten-4">
            <v-icon>mdi-home</v-icon>首页
          </v-btn>

          <v-btn value="tag" @click="routerTo('tag')" class="grey lighten-4">
            <v-icon>mdi-tag</v-icon>标签
          </v-btn>

          <v-btn value="archive" @click="routerTo('archive')" class="grey lighten-4">
            <v-icon>mdi-archive</v-icon>归档
          </v-btn>

          <v-btn value="information" @click="routerTo('information')" class="grey lighten-4">
            <v-icon>mdi-information-variant</v-icon>关于我
          </v-btn>
        </v-btn-toggle>
      </div>

    </v-app-bar>


    <!-- 菜单栏 -->
    <v-navigation-drawer app :fixed="flag.isMobile" :class="flag.isMobile?'my-navigation-mobile':'my-navigation'" height="auto" color="grey lighten-3" v-model="flag.drawerShow" :temporary="flag.isMobile" :floating="!flag.isMobile" :permanent="!flag.isMobile" :clipped="!flag.isMobile"  :absolute="!flag.isMobile">

      <!-- 头像部分 -->
      <div style="margin: 25px auto; text-align: center">
        <v-avatar size="88">
          <v-img contain alt="头像" src="./assets/img/avatar.jpg">

          </v-img>
        </v-avatar>
        <div style="font-weight: bold; font-size: 20px; margin-top: 15px">虚光</div>
      </div>
      <v-divider></v-divider>

      <!-- 菜单部分 -->
      <div  class="hidden-sm-and-up">
        <v-list>
          <v-list-item-group  v-model="information.activeMenu">
            <v-list-item @click="routerTo('home')" value="home">
              <v-list-item-icon><v-icon>mdi-home</v-icon></v-list-item-icon>
              <v-list-item-content>首页</v-list-item-content>
            </v-list-item>
            <v-list-item @click="routerTo('tag')" value="tag">
              <v-list-item-icon><v-icon>mdi-tag</v-icon></v-list-item-icon>
              <v-list-item-content>标签</v-list-item-content>
            </v-list-item>
            <v-list-item @click="routerTo('archive')" value="archive">
              <v-list-item-icon><v-icon>mdi-archive</v-icon></v-list-item-icon>
              <v-list-item-content>归档</v-list-item-content>
            </v-list-item>
            <v-list-item @click="routerTo('information')" value="information">
              <v-list-item-icon><v-icon>mdi-information-variant</v-icon></v-list-item-icon>
              <v-list-item-content>关于我</v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </div>
      <v-divider></v-divider>

      <!-- 联系信息 -->
      <div style="margin: 10px auto 15px;" class="d-flex justify-space-around flex-wrap align-content-space-between">
        <v-btn class="mt-2 my-information-btn"  @click="qq">
          <v-icon>mdi-qqchat</v-icon>QQ
        </v-btn>

        <v-btn class="mt-2 my-information-btn" target="_blank" href="https://gitee.com/vignetting/blog_front_end">
          <v-icon>mdi-github</v-icon>GITEE
        </v-btn>

        <v-btn class="mt-2 my-information-btn" @click="flag.showWechat = !flag.showWechat" >
          <v-icon>mdi-wechat</v-icon>微信
        </v-btn>

        <v-btn class="mt-2 my-information-btn" target="_blank" href="https://github.com/Vignetting">
          <v-icon>mdi-github</v-icon>GITHUB
        </v-btn>
      </div>
      <v-divider></v-divider>

      <!-- 微信图片 -->
      <v-img contain max-width="80%" style="margin: 0 auto 10px" class="mt-4" v-show="flag.showWechat" src="./assets/img/wechat.png"></v-img>
      <v-divider></v-divider>

      <!-- 热门文章 -->
      <div style="margin: 15px 5px" class="hidden-xs-only">
        <h3 style="text-align: center">热门文章</h3>
        <v-list light>
          <v-list-item-group>
            <v-list-item v-for="item in popularArticles" :key="item.articleId" @click="goToArticle(item.articleId)">
              <v-list-item-title>
                {{item.title}}
              </v-list-item-title>
              <v-icon>mdi-eye</v-icon>{{item.pageView}}
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </div>
      <v-divider></v-divider>

      <!-- 网站信息 -->
      <div :class="flag.isMobile?'my-navigation-information-mobile':'my-navigation-information'">
        <div style="font-size: 14px; font-weight: 300; text-align: center">2020 vignetting</div>
        <div style="font-size: 14px; font-weight: 300; text-align: center">vignetting.top</div>
        <div style="font-size: 14px; font-weight: 300; text-align: center">蜀ICP备19033371号</div>
      </div>

    </v-navigation-drawer>


    <!-- 主体内容 -->
    <v-main app style="text-align: center; min-height: 100vh; position: relative">
      <keep-alive>
        <router-view ref="home" :widthLevel="information.widthLevel" @childloading="childLoadingEvent" @updateError="updateError">
        </router-view>
      </keep-alive>

      <!-- 加载页面 -->
      <v-overlay absolute :value="flag.childLoading" opacity="1" color="white">
        <v-progress-circular style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%)" v-show="flag.childLoading" indeterminate size="96" color="primary"></v-progress-circular>
      </v-overlay>
    </v-main>


    <!-- 固定内容 -->
    <div style="position: fixed; right: 5%; bottom: 5%;">
      <v-scale-transition>
        <v-btn v-show="flag.showUpIcon" @click="goToHead" class="mx-2" fab dark large color="cyan">
          <v-icon dark>mdi-arrow-up-bold-outline</v-icon>
        </v-btn>
      </v-scale-transition>
    </div>

    <!-- 公告 -->
    <v-snackbar elevation="4" v-model="flag.showNotice" :right="!flag.isMobile" :centered="flag.isMobile"  multi-line color="green lighten-2" rounded top>
      {{information.notice}}
      <template v-slot:action="{ attrs }">
        <v-btn text v-bind="attrs" @click="flag.showNotice = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>

    <!-- 错误通知 -->
    <v-snackbar elevation="6" v-model="flag.showError" :right="!flag.isMobile" :centered="flag.isMobile"  multi-line color="red lighten-1" rounded top>
      {{information.error}}
      <template v-slot:action="{ attrs }">
        <v-btn text v-bind="attrs" @click="flag.showError = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>

    <!-- 加载页面 -->
    <v-overlay :value="flag.loading" opacity="1" color="white">
      <v-progress-circular style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%)" v-show="flag.loading" indeterminate size="96" color="primary"></v-progress-circular>
    </v-overlay>
  </v-app>
</template>

<script>
import Http from "@/api/http";


export default {
  name: 'App',


  data: ()=>{
    return {

      // 热门文章
      popularArticles: [

      ],

      // 所有信息类属性
      information: {
        activeMenu: "",
        searchContent: "",
        widthLevel: 1,
        notice: "",
        error: "",
      },

      // 所有标志属性
      flag: {
        isMobile: false,              // 是否是移动端的标志
        drawerShow: false,            // 是否显示侧边栏
        showWechat: false,             // 是否显示微信图标
        showUpIcon: false,
        showNotice: true,
        showError: false,
        loading: false,
        childLoading: false,
        searchFlag: false
      },
    };
  },


  methods: {
    /*  用于监测是否是移动端，如果是则进行相应转换   */
    checkIsMobile(){
      if(document.body.clientWidth < 600){
        if(this.flag.isMobile === false){
          this.flag.isMobile = true;
          this.flag.drawerShow = false;
        }
      }else {
        this.flag.isMobile = false;
      }

      if(document.body.clientWidth < 600){
        this.information.widthLevel = 1;
      }else if(document.body.clientWidth < 1200){
        this.information.widthLevel =2;
      }else {
        this.information.widthLevel = 3;
      }

    },

    qq(){
      if(this.flag.isMobile){
        window.open("mqqwpa://im/chat?chat_type=wpa&uin=2623926952&version=1&src_type=web&web_src=vignetting.top", "_blank")
      }else {
        window.open("tencent://message/?uin=2623926952&Site=vignetting&Menu=yes", "_blank")
      }
    },

    /*  接收子组件传来的错误信息  */
    updateError(errorMessage){
      this.flag.showError = true;
      this.information.error = errorMessage;
    },

    /*  前往文章  */
    goToArticle(id){
      this.$router.push("/article/"+id);
    },


    /*  路由前往  */
    routerTo(path){
      this.$router.push("/"+path)
    },

    /*  进行搜索  */
    searchPre(){
      if(this.$route.path != "/home"){
        this.$router.push("/home");
        setTimeout(()=>{
          if(this.$route.path == "/home"){
            this.$refs.home.search(this.information.searchContent,1);
          }else {
            this.searchPre();
          }
        }, 100)
      }else {
        this.$refs.home.search(this.information.searchContent,1);
      }
    },

    /*  处理子组件加载事件 */
    childLoadingEvent(flag){
      this.flag.childLoading = flag;
    },

    /* 回到首部 */
    goToHead(){
      const myTimer = setInterval(function () {
        document.documentElement.scrollTop = document.documentElement.scrollTop - 30;
        if (document.documentElement.scrollTop <= 0) {
          clearInterval(myTimer)
        }
      })
    }
  },

  computed:{
  },

  created() {
    // 1.初始化
    this.flag.loading = true;

    // 判断是否是移动端
    if(document.body.clientWidth < 600){
      this.flag.isMobile = true;
    }

    // 更改激活路径
    this.information.activeMenu = this.$route.path.substr(1,this.$route.path.length-1);


    // 2.获取数据
    // 获取热门数据
    Http.get("/article/home/popular").then(data=>{
      if(data.code == 1){
        this.popularArticles = data.result;
      }else {
        this.flag.showError = true;
        this.information.error = data.message;
      }
    }).catch(fail=>{
      this.flag.showError = true;
      this.information.error = "服务端发生错误";
      console.error(fail);
    })

    // 获取公告
    Http.get("/common/notice").then(data=>{
      if(data.code == 1){
        this.information.notice = data.result;
        this.flag.showNotice = true;
        this.flag.loading = false;
      }else {
        this.flag.showError = true;
        this.information.error = data.message;
        this.flag.loading = false;
      }
    }).catch(fail=>{
      this.flag.showError = true;
      this.information.error = "服务端发生错误";
      console.error(fail);
      this.flag.loading = false;
    })

    // 3.绑定事件
    document.addEventListener("scroll",()=>{
      if(document.documentElement.scrollTop > document.documentElement.scrollHeight*0.3){
        this.flag.showUpIcon = true;
      }else {
        this.flag.showUpIcon = false;
      }
    })
  },


  watch:{
    "$route.path"(newValue, oldValue) {
      this.information.activeMenu = this.$route.path.split("/")[1];
      const myTimer = setInterval(function () {
        document.documentElement.scrollTop = document.documentElement.scrollTop - 30;
        if (document.documentElement.scrollTop <= 0) {
          clearInterval(myTimer)
        }

      })
    }
  }

}
</script>

<style>
  .my-information-btn{
    width: 40%;
  }

  .my-navigation {
    margin-top: 5px;
    padding: 7px 5px;
    width: calc(200px + 5%);
  }

  .my-navigation-mobile {
    height: 100vh !important;
    padding: 7px 5px;
    width: calc(200px + 5%);
  }

  .my-navigation-information {
    margin: 15px auto;
  }

  .my-navigation-information-mobile {
    margin: calc(30px + 25%) auto 0;
  }
</style>

<style>
  .v-app-bar  .v-text-field  .v-input__control  .v-input__slot{
    margin-bottom: -12px!important;
  }
</style>
